<template>
    <div>
        <h3>会员显示列表</h3>
        <br>
        会员昵称:
        <input type="text" v-model="page.name">
        年龄范围:
        <input type="number" v-model="page.minage">~
        <input type="number" v-model="page.maxage">
        会员等级：
        <select v-model="page.did" >
             <option value="0">请选择</option>
             <option v-for="d in ds" :value="d.lId">{{d.dname}}</option>
         </select>
         <input type="button" value="查询" @click="show">
         <input type="button" value="清空" @click="qing">
        
        <table class="table">
            <thead>
                <tr>
                    <th>会员编号</th>
                    <th>会员昵称</th>
                    <th>会员年龄</th>
                    <th>手机号</th>
                    <th>累计消费次数</th>
                    <th>会员等级</th>
                    <th>会员状态</th>
                    <th>会员头像</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-for="d in data">
                <tr>
                    <td>{{d.mid}}</td>
                    <td>{{d.mname}}</td>
                    <td>{{d.age}}</td>
                    <td>{{d.phone}}</td>
                    <td>{{d.price}}</td>
                    <td>{{d.dname}}</td>
                    <td>{{d.state?"启用":"禁用"}}</td>
                    <td>
                        <img :src='"https://localhost:7237"+d.img' style="width: 60px; height:60px;">
                    </td>
                    <td>
                        <input type="button" value="修改" @click="updet(d.mid)">
                        <input type="button" :value='d.state?"禁用":"启用"' @click="states(d.mid)">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{sum.count}}条数据，页容量{{page.size}}条，
        共{{sum.pageCount}}页，目前第{{page.index}}页 
        <input type="button" value="首页" @click="fan(1)">
        <input type="button" value="上一页" @click="fan(page.index-1)">

        <input type="button" v-for="d in sum.pageCount"  :value="d" @click="fan(d)">

        <input type="button" value="下一页" @click="fan(page.index+1)">
        <input type="button" value="尾页" @click="fan(sum.pageCount)">
        页容量:
        <select v-model="page.size" @change="yer">
            <option value="3">===3===</option>
            <option value="4">===4===</option>
            <option value="5">===5===</option>
        </select>
        转到:
        <input type="number" v-model="page.index">
        <input type="button" value="跳转/页" @click="show" class="btn btn-success">

        <br>
        <a href="https://localhost:7237/api/Men/DuExec">会员信息导出</a>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import { useStore } from '@/stores/info';
const userst=useStore();
const router=useRouter();
const route=useRoute();


const updet=(val:any)=>{
    router.push({path:"/update",query:{id:val}})
}

const states=(val:any)=>{
    axios.get("https://localhost:7237/api/Men/Stateup",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert('该用户已被禁用！')
            show()
        }
        else{
            alert('该用户已被禁用！无法启用')
        }
    })
}





//翻页
const fan=(e:any)=>{
    if(e>=1 && e<=sum.value.pageCount){
        page.value.index=e;
        show()
    }
}
const yer=()=>{
    page.value.index=1;
    show()
}

const data=ref([{
      "mid": 0,
      "mname": "",
      "age": 0,
      "phone": "",
      "price": "",
      "did": 0,
      "state": true,
      "img": "",
      "dname": ""
}])



const sum=ref({
    count:0,
    pageCount:0
})
const page=ref({
    name:"",
    minage:0,
    maxage:0,
    did:0,
    index:1,
    size:3
})
const show=()=>{
    axios.get("https://localhost:7237/api/Men/Show",{params:page.value}).then(res=>{
        data.value=res.data.list;
        sum.value.count=res.data.datt;
        sum.value.pageCount=Math.ceil(sum.value.count/page.value.size)
    })
}

const qing=()=>{
    page.value.name="";
    page.value.minage=0;
    page.value.maxage=0;
    page.value.did=0;
    show()
}

const ds=ref([{
    "lId": 0,
    "dname": ""
}])
onMounted(()=>{
    bang()
    show()
    if(!userst.usert.username){
        router.push({path:"/login"})
    }
})

const bang=()=>{
    axios.get("https://localhost:7237/api/Men/Dbang").then(res=>{
        ds.value=res.data
    })
}
</script>

<style scoped>

</style>